<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic/js/angular/angular-sanitize.js"></script>
    <script src="js/jquery.min.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/service.js"></script>
    <script src="js/app.js"></script>
    <style type="text/css">

    .pagination{
      display: inline-block;
      padding-left: 0;
      margin: 20px 0;
      border-radius: 4px;
    }
    .pagination>li {
      display: inline;
    }

    .pagination>li:first-child>a, .pagination>li:first-child>span {
      margin-left: 0;
      border-bottom-left-radius: 4px;
      border-top-left-radius: 4px;
    }
    .pagination>li>a, .pagination>li>span {
      position: relative;
      float: left;
      padding: 6px 12px;
      line-height: 1.42857143;
      text-decoration: none;
      color: #428BCA;
      background-color: #FFF;
      border: 1px solid #DDD;
      margin-left: -1px;
    }
    .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
      z-index: 2;
      color: #FFF;
      background-color: #428BCA;
      border-color: #428BCA;
      cursor: default;
    }
    .pagination>li:last-child>a, .pagination>li:last-child>span {
      border-bottom-right-radius: 4px;
      border-top-right-radius: 4px;
    }

    .loading{
      width: 100%;
      height: 510px;
      text-align: center;
      line-height: 510px;
    }
    .loading i{
      font-size: 80px;
    }

    </style>
  </head>
  <body ng-app="blog">
      <ion-pane ng-controller="index">
        <div ng-if="current == 'index'">
          <ion-header-bar class="bar-stable">
            <h1 class="title">首页</h1>
          </ion-header-bar>
          <ion-content>
          <div ng-if="loading" class="loading">
            <i class="icon ion-ios7-reloading"></i>
          </div>
          <ion-list ng-if="!loading">
            <ion-item ng-repeat="item in lists" ng-href="?id={{item.id}}">
              <div ng-bind="item.title"></div>
            </ion-item>
          </ion-list>
          <div class="card" style="text-align:center" ng-if="!loading">
            <jpage totalpage="totalpage" currentpage="currentpage" go="gotopage(page)"></jpage>
          </div>
          </ion-content>
        </div>
        <div ng-if="current !== 'index'">
          <ion-header-bar class="bar-stable">
            <button class="button button-icon icon ion-ios7-arrow-left" onclick="history.go(-1);"></button>
            <h1 class="title" ng-bind="detail.title"></h1>
          </ion-header-bar>
          <div ng-if="loading" class="loading">
            <i class="icon ion-ios7-reloading"></i>
          </div>
          <ion-content>
            <div class="card" ng-if="!loading">
              <div class="item item-text-wrap" ng-bind-html="detail.content">
              </div>
            </div>
          </ion-content>
        </div>
      </ion-pane>
  </body>
</html>
